<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>添加删除记录</title>
  <script src="jquery-1.11.3.min.js"></script>
  <style>
      div{
	     width:550px;
	     margin:0 auto;
		 border:1px black solid;
		 text-align: center;
	  }
	  div table{
	     margin:0 auto;
         width:550px;
	  }
      div table tr td{
		 border:1px black solid;
	  }
      div table tr td a{
	      color:red;
	  }
	  div table tr td a:hover{
	     cursor:pointer;
		 text-decoration:underline;
	  }
  </style>
 </head>
 <body>
    <div>
	   <table cellspacing="0">
	      <thead>
		     <tr> <td>Name</td> <td>Email</td> <td>Salary</td> <td>删除</td> </tr>
		  </thead>
		  <tbody>
		  </tbody>
	   </table>
	   <h3>输入信息：</h3>
	   <input id="name" type="text">
	   <input id="email" type="text">
	   <input id="salary" type="text">
	   <button>确定</button>
	</div>
 </body>
 <script>
    $("button").click(function(){
	   var $name = $("#name");
	   var $email = $("#email");
	   var $salart = $("#salary");

       var $tr = $("<tr></tr>").append("<td>"+$name.val()+"</td>")
	                 .append("<td>"+$email.val()+"</td>")
	                 .append("<td>"+$salart.val()+"</td>")
					 .append("<td><a>删除</a></td>")
	   .appendTo($("div table"));

	   myClick($tr);

       $name.val("");
       $email.val("");
       $salart.val("");
	});

    function myClick($tr){
	   $tr.find("a").click(function(){
	       $tr.remove();
	   });
	}
    




 </script>
</html>
